<audiojs onclick={startAudio}>
	<div class="audio-wave">
		<div class={'small':true,'stop-animate':isStop}></div>
		<div class={'middle':true,'stop-animate':isStop}></div>
		<div class={'large':true,'stop-animate':isStop}></div>
	</div>
	<div class="audio-duration" if={duration}>{duration}"</div>
	<audio preload="auto" hidden="true" ref="audio"><source src={opts.source.src} type={opts.source.type}></audio>
<script>
	let tag = this;

	tag.on('before-mount', function() {
		tag.isStop = true;
		tag.duration = '';
	});

	tag.on('mount', function() {
		tag.refs.audio.oncanplay = function(){
			tag.duration = Math.round(tag.refs.audio.duration);
			tag.update();
		}
		tag.refs.audio.addEventListener('ended', function(){
			tag.isStop = true;
			tag.update();
		});
	});
	tag.startAudio = function(){
		tag.isStop ? tag.refs.audio.play():tag.refs.audio.pause();
		tag.isStop = !tag.isStop;
		tag.update();
	}
</script>
<style>
	:scope{
		width: calc(20vw);
		display: block;
	}
	:scope .audio-wave{
		display: inline-block;
	}
	:scope .audio-duration{
		float: right;
		height: 1.8rem;
		line-height:1.8rem;
	}
	:scope .small{
		width: 0.6rem;
		height: 0.6rem;
		border-style: solid;
		border-top-color: transparent;
		border-left-color: transparent;
		border-bottom-color: transparent;
		border-radius: 50%;
		box-sizing: border-box;
		vertical-align: middle;
		display: inline-block;
		color:#A2A2A2;
	}

	:scope .middle{
		width: 1.2rem;
		height: 1.2rem;
		border-style: solid;
		border-top-color: transparent;
		border-left-color: transparent;
		border-bottom-color: transparent;
		border-radius: 50%;
		box-sizing: border-box;
		vertical-align: middle;
		display: inline-block;
		margin-left: -1rem;
		animation: middle-wave-animation 3s ease-in-out infinite;
		opacity: 1;
		color:#A2A2A2;
	}
	@keyframes middle-wave-animation {
		0% { opacity: 0;}
		30% { opacity: 1;}
		100% { opacity: 0;}
	}
	:scope .large{
		width: 1.8rem;
		height: 1.8rem;
		border-style: solid;
		border-top-color: transparent;
		border-left-color: transparent;
		border-bottom-color: transparent;
		border-radius: 50%;
		box-sizing: border-box;
		vertical-align: middle;
		display: inline-block;
		margin-left: -1.6rem;
		animation: large-wave-animation 3s ease-in-out infinite;
		opacity: 1;
		color:#A2A2A2;
	}
	@keyframes large-wave-animation {
		0% { opacity: 0;}
		60% { opacity: 1;}
		100% { opacity: 0;}
	}
	:scope .stop-animate{
		-moz-animation-name: none;
		-webkit-animation-name: none;
		-ms-animation-name: none;
		animation-name: none;	
	}
</style>
</audiojs>